<template>
    <a-pagination v-model:current="current" v-model:page-size="pageSize" :page-size-options="pageSizeOptions" :total="total"
        show-quick-jumper show-size-changer @showSizeChange="onShowSizeChange" @change="onChange">
        <template #buildOptionText="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-else>全部</span>
        </template>
    </a-pagination>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
        const current = ref(1);//当前页码默认是1
        const pageSizeRef = ref(10);//默认一页显示10条
        const total = ref(50);//总条数
        const onShowSizeChange = (current: number, pageSize: number) => {
            console.log(current, pageSize);//current当前页码 pageSize当前多少条
            pageSizeRef.value = pageSize;
        };
        const onChange = (pageNumber: number) => {
            console.log('Page: ', pageNumber);
        };
        return {
            pageSizeOptions,
            current,
            pageSize: pageSizeRef,
            total,
            onShowSizeChange,
            onChange,
        };
    }
})
</script>

<style scoped></style>